/* eslint-disable no-useless-concat */
import { Input, message } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import { httpPostFile } from '../../utils/xhr';
import { useState } from 'react';
const scss = require('../../assets/styles/map.module.scss');

const { Search } = Input;

/**
 * imgList { 图片列表 }
 * imgRightIs_ { 控制右边图片列表显示隐藏 }
 * mouseGoOn { 鼠标移入事件 }
 * mouseGoOut { 鼠标移出事件 }
 * OnClick  { 鼠标点击事件 }
 */
interface MImgProps {
    imgList: Array<any>;
    imgRightIs_: boolean;
    mouseGoOn: () => void;
    mouseGoOut: () => void;
    OnClick: (a: any) => void;
    currentPicture: number
}

export const MImg = (
    { imgList, imgRightIs_, mouseGoOn, mouseGoOut, OnClick, currentPicture }: MImgProps
) => {

    return (
        imgList.length > 0 ?
            <div
                className={scss['c-img-module']}
                onMouseOver={mouseGoOn}
                onMouseOut={mouseGoOut}
            >
                <div className={scss['c-img-module-left']}>
                    <img
                        src={imgList[currentPicture].imgUrl}
                        alt={imgList[currentPicture].type}
                    />
                </div>
                {
                    imgList.length > 1 &&
                    <div className={scss['c-img-module-right'] + ' ' + (!imgRightIs_ && scss['c-img-module-right-hide'])}>
                        {
                            imgList.map((item, index) => {
                                return <div key={index + 'mapImg'}>
                                    <img
                                        src={item.imgUrl}
                                        alt={item.type}
                                        onClick={() => OnClick(index)}
                                    >
                                    </img>
                                    <div>{item.name}</div>
                                </div>
                            })
                        }
                    </div>
                }

            </div>
            : <></>
    )
}


interface MSearchProps {
    listMode: any[];
    onChange: (value: any) => void;
    onSearch: (value: any) => void;
    getPoint: (value: any) => void;
}

export const MSearch = (
    { onSearch, onChange, getPoint, listMode }: MSearchProps
) => {
    return <div className={scss['c-search']}>
        <Search
            className={scss['search-input']}
            placeholder="地名搜索"
            onSearch={onSearch}
            onKeyUp={onChange}
            enterButton
        />
        <div className={scss['search-item']}>
            {
                listMode.map((item, index) => {
                    return <div
                        key={index + item.name}
                        onClick={() => getPoint(index)}
                    >
                        {item.name}
                    </div>
                })
            }
        </div>

    </div>
}

interface MToolProps {
    listMode: any;
    className?: object
}

export const MTool = (
    { listMode, className }: MToolProps
) => {
    return <div
        className={scss['c-tool']}
        style={className ? className : {}}
    >
        {
            listMode
        }
    </div>
}


export const MIcon = (
    { url, onClick, status, urls }: any
) => {
    return <div>
        <img
            className={scss['c-icon']}
            onClick={onClick}
            src={status ? url : urls}
            alt={"icon"}
        />
    </div>
}

/**
 * 弹窗组件
 * @param sub 弹窗参数
 * @returns 
 */
export const Popup = (sub: any) => {
    let { OverlayData } = sub;
    return <div
        id={'POPUP'}
        className={scss['poput-text']}
        style={{
            display: OverlayData.status ? 'block' : 'none'
        }}
    >
        <div>
            <CloseOutlined
                style={{
                    float: 'right',
                    margin: '5px'
                }}
                onClick={sub.clearOverlay}
            />
        </div>
        <div>
            <span></span>
        </div>
        {
            OverlayData.content && <div className={scss['overlay-over']}>
                <div>{OverlayData.content}</div>

            </div>
        }
    </div>
}
/**
 * 批量点位信息
 */
export const BatchPoint = (sub: any) => {
    let { batchPointUpload, setBatchIs } = sub;
    const [ivalue, setIvalue]: any = useState({ name: '' });
    /**
     * 下载模板
     */
    const downTemplate = () => {
        let url = "https://cloud-map.oss-cn-hangzhou.aliyuncs.com/template/%E7%82%B9%E4%BD%8D%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx";

        httpPostFile(url, "点位模板.xlsx")
    };
    /**
     * 文件拖拽或者上传事件
     */
    const onInputChange = (e: any) => {
        /**
         * 重构一个上传对象
         */
        let sub = { name: e.target.value, files: e.target.files[0] }
        setIvalue(sub)
    }
    /**
     * 文件上服务器，解析完成之后返回文件列表进行打点
     */
    const submit = () => {
        if (ivalue.files) {
            batchPointUpload(ivalue.files)
        } else {
            message.info("上传文件为空")
        }
    }
    return (
        <div
            className={scss['c-batch-point']}
        >
            <div className={scss['c-batch-file']}>
                <input type="file" id="file" value={ivalue ? ivalue.name : ''} onChange={onInputChange} accept=".xlsx" />
            </div>
            <img src={require("../../assets/icon/updownicon.svg").default} alt="" />
            <div className={scss['c-batch-point-describe']}
                style={{
                    color: ivalue.files ? "#00c3ff" : "#00000073"
                }}
            >点击或将文件拖拽到这里上传<span>{ivalue.files && "√"}</span></div>
            <div className={scss['point-a']}><span onClick={downTemplate}>下载模板</span></div>
            <div className={scss['sub-btn']}>
                <span onClick={setBatchIs}>取消</span>
                <span onClick={submit}>上传</span>
            </div>

        </div>
    )
}